<template>
	<view>
		<!-- 顶部背景图 -->
		<image class="background-image" src="../../static/个人主页背景图.png" mode="aspectFill"></image>

		<!-- 个人头像 -->
		<view class="avatar-container">
			<image class="avatar" src="../../static/头像2.jpeg"></image>
		</view>
		<view class="example">
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="姓名">
					<uni-easyinput v-model="baseFormData.userName" disabled />
				</uni-forms-item>
				<uni-forms-item label="年龄">
					<uni-easyinput v-model="baseFormData.userAge" disabled />
				</uni-forms-item>
				<uni-forms-item label="工号">
					<uni-easyinput v-model="baseFormData.userId" disabled />
				</uni-forms-item>
				<uni-forms-item label="电话号">
					<uni-easyinput v-model="baseFormData.userPhone" disabled />
				</uni-forms-item>
				<uni-forms-item label="所属部门">
					<uni-easyinput v-model="baseFormData.userDepartment" disabled />
				</uni-forms-item>
				<uni-forms-item label="职位">
					<uni-easyinput v-model="baseFormData.userPosition" disabled />
				</uni-forms-item>
				<uni-forms-item>
					<button type="primary" @click="signOut">退出登录</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					userName: '',
					userAge: '',
					userId: '',
					userPhone: '',
					userDepartment: '',
					userPosition: ''
				},
			};
		},
		methods: {
			signOut() {
				localStorage.clear();
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			getUserInfoById() {
				uni.request({
					url: "http://localhost:8088/getUserInfoById?userId=" + localStorage.getItem("userId"),
					method: 'GET',
					success: (res) => {
						if (res.data.code === '0') {
							const userData = res.data.data[0];
							this.baseFormData = {
								userName: userData.userName,
								userAge: userData.userAge,
								userId: userData.userId,
								userPhone: userData.userPhone,
								userDepartment: userData.userDepartment,
								userPosition: userData.userPosition
							};

							this.loading = false;
						} else {
							uni.showToast({
								title: '获取数据失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			}

		},
		created() {
			this.getUserInfoById();
		}
	};
</script>

<style>
	.background-image {
		width: 100%;
		height: 150px;
		/* 根据需要调整背景图高度 */
	}

	.avatar-container {
		position: absolute;
		top: 100px;
		/* 根据背景图高度和需要调整头像位置 */
		left: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
		overflow: hidden;
		width: 90px;
		/* 根据需要调整头像容器宽度 */
		height: 90px;
		/* 根据需要调整头像容器高度 */
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		/* 可选：添加阴影效果 */
	}

	.avatar {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.example {
		margin-top: 40px;
		padding: 15px;
		background-color: #fff;
	}

	.form-item {
		display: flex;
		align-items: center;
	}
	
</style>